// sass文件的后缀名是 .scss 不是 .sass

// 变量、嵌套、父选择器

@import './base.scss';

// 1、变量： 使用$开头，多个单词使用连字符-连接，变量的值就是CSS属性值
$font-12: 12px;
$font-14: 14px;
$font-16: 16px;

$align: 'left';
$text: 'text';

$common-color: #ff6a00;

body {
	$w: 900px;
	font-size: $font-14 + 2px;

	// 3、插值语法 在 #{变量}
	#{$text}-align: center;
}

// 导航栏

// 2、嵌套
.nav {
	.left {
		.logo {
			font-size: $font-16;
			// width: $w;
		}
	}

	.right {
		.nav-list {
			.item {
				font-size: $font-14;
				color: $common-color;

				// 4、父选择器 &
				&:hover {
					color: red;
				}
			}
		}
	}
}
.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;
}

.box {
	&:hover {
		color: red;
	}
}

.inner{
  // 继承：继承.box选择器的样式
  @extend .box;
  position: relative;
  display: flex;
}

@for $i from 1 through 6 {
  .item-color#{$i}{
    color: '#1122#{$i*10}';
  }
}


// 内容
